<template>
    <div class="header">
        <van-row>
            <van-col span="2">
                <van-icon class="icon" name="bars" size="25px" color="#ffffff" />
            </van-col>
            <van-col span="20">
                <van-search v-model="keyword" background="#ff6464" placeholder="请输入搜索关键词" @search="onSearch" />

            </van-col>
            <van-col span="2">
                <van-icon class="icon" name="user-o" size="26px" color="#ffffff" />
            </van-col>
        </van-row>
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in productimg" :key="image">
                <img :src="image" height="220" width="100%" />
            </van-swipe-item>
        </van-swipe>
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

        <!--快捷图标-->
        <div class="iconks">
            <van-grid :column-num="5" icon-size="46px" :border="false">
                <van-grid-item v-for="item in tableicon" :icon="item.img" :text="item.text" />
            </van-grid>
        </div>
        <!--商品秒杀模块-->
        <div class="proms">
            <van-row>
                <van-col span="6" class="mscol">
                    <span style="font-size: 20px; font-weight: 700;">华蓝秒杀</span><br>
                    <span>限时低价</span>
                    <div style="border-radius: 20px;width: 60px; height: 15px; background-color: aliceblue;">
                        去抢购 <van-icon name="play-circle" color="red" />
                    </div>
                </van-col>
                <van-col span="18">
                    <van-grid :border="false" :column-num="4">
                        <van-grid-item style="height: 106px; margin-top: 3px;" v-for="item in msData" :key=item.id>
                            <van-image :src="item.img" width="60" height="60" style="margin-bottom: 8px;" />
                            <span style="color: red;"><em>￥</em>{{item.price}}</span>
                        </van-grid-item>
                    </van-grid>
                </van-col>

            </van-row>
        </div>
        <!--商品展示-->
        <hr>
        <van-grid :border="false" :column-num="2" style="margin-bottom: 40px;">
            <van-grid-item v-for="item in productdata" :key="item.id" :to="({ name:'movedetails',query:{id : item.id}} )">
                <van-image :src="item.img" />
                <span class="title">{{ item.name }}</span>
                <span>{{ item.subName }}</span>
                <div style="color: red; margin-right: 140px; margin-top: 5px; margin-bottom: 10px;"><em>￥</em><span
                        style="font-size: 20px; font-weight: 700;">{{ item.price }}</span></div>
                <div>
                    <div style="float: left; margin-right: 80px; color: #9fa19c;">1万+条评论</div>
                    <div style="float: right;">看相似</div>
                </div>
            </van-grid-item>

        </van-grid>
    </div>



    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster-o" :to="({ name:'movecategory'})">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { productApi } from '@/api'
import { onMounted } from 'vue'


const active = ref(0)
const keyword = ref('')
// 轮播图的图片数组
const productimg = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])
//快捷图标
const tableicon = ref([
    { img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', text: '华蓝超市' },
    { img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png', text: '数码电器' },
    { img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: '服饰美妆' },
    { img:'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png',text:'充值中心'},
    { img: 'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png', text: '充值中心' }
])
// 秒杀的data
const msData = ref([
    { id: '1', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/283714/27/5313/126321/67da4e66F579da5ec/40864ce5108be971.png', price: 9.8 },
    { id: '2', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/276630/23/1692/77187/67d12cd7Fcf88bb1f/ef374dea8396948d.jpg', price: 1339 },
    { id: '3', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/280815/8/2326/157169/67d3f427F6df62199/bd7d864ed06e5563.jpg', price: 720 },
    { id: '3', img: 'https://m.360buyimg.com/seckillcms/jfs/t1/280815/8/2326/157169/67d3f427F6df62199/bd7d864ed06e5563.jpg', price: 720 },
])
const productdata=ref([] as any)

//渲染数据
onMounted(()=>{
    CallproductApi()
})

const CallproductApi = () => { 
    productApi.select.cell().then((res:any)=>{
        console.log(res)
        productimg.value = Array.from(res, ({ img }) => img)
        productimg.value=productimg.value.slice(0,5)
        // console.log(productimg.value);
        const items = res.filter((item:any) => {
            // console.log(item)
            if (item.status == 1) {
                // console.log(item)
               return item
            }
        })
       
       console.log(items)
        productdata.value = items
        productdata.value = productdata.value.slice(0, 8)
        msData.value = items.map((res:any) => { 
            // console.log(res)
            return {
                img: res.img,
                price: res.price
            }
        })
        //截取数据
        msData.value=msData.value.slice(0,4)
    })
}


//搜索触发
const onSearch = () => { 
    console.log(keyword.value);
    
}
</script>

<style scoped>
.header{
    height: 385px;
    background: linear-gradient( to bottom, #ff5454, rgb(251, 251, 250));
    .icon{
       margin-left: 10px;
       margin-top: 10px;
    }
    .van-search{
        border-radius: 20px;
       
    }
}
:deep(.van-search__content) {
     border-radius: 20px !important;
     height: 30px !important;
 }
 .iconks{
    height: 110px;
    background-color: #fbfbfb;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    :deep(.van-grid-item__text){
        font-size: 15px;
    }
   .van-grid-item{
    /* --van-grid-item-content-background:rgb(251, 247, 247); */
    /* opacity: 0.5; */
    /* background-color: rgba(255, 255, 255, 0.5); */
    --van-grid-item-content-background: rgba(255, 255, 255, 0.1);
   }
 }
 .proms{
    height: 110px;
    background-color: #f70505;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    .mscol{
        text-align: center;
        margin-top: 20px;
        color: #fbfbfb;
        div{
            color: red;
            margin-left: 12px;
            margin-top: 12px;
            font-size: 12px;
        }
    }
 }
 .title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;/* 限制行数为3 */
    overflow: hidden;
 }
</style>